document.addEventListener('DOMContentLoaded', function () {
    // 获取元素
    const carouselMain = document.querySelector('.carousel-image-main');
    const images = document.querySelectorAll('.carousel-image-main img');
    const indexDots = document.querySelectorAll('.indexs');
    const sidecards = document.querySelectorAll('.display-sides');

    // 设置初始状态
    let currentIndex = 0;
    const totalImages = images.length - 1;
    const imageWidth = 600;
    let crtFocusedCardIdx = 0;
    let intervalId; // 存储 setInterval 的 ID

    // 设置轮播图容器的宽度
    carouselMain.style.width = `${imageWidth * images.length}px`;

    // 更新指示点状态
    function updateIndexDots() {
        const dotIndex = currentIndex === totalImages ? 0 : currentIndex;
        indexDots.forEach((dot, index) => {
            dot.style.backgroundColor = index === dotIndex ? '#64cbff' : '#ffffff';
        });
    }

    // 切换到指定图片
    function goToImage(index) {
        currentIndex = index;
        carouselMain.style.transform = `translateX(-${currentIndex * imageWidth}px)`;
        updateIndexDots();
        console.log("currentIndex:" + currentIndex);
    }

    // 更新卡片聚焦状态
    function updateCardsFocus() {
        sidecards.forEach((card, index) => {
            if (index === crtFocusedCardIdx) {
                card.style.boxShadow = '0px 4px 50px 10px rgba(109,165,255,0.48)';
                card.style.top = '0px';
            } else {
                card.style.boxShadow = 'none';
                card.style.top = '0px';
            }
        });
    }

    // 根据卡片index获取对应的图片index
    function getImageIndexByCardIndex(cardIndex) {
        switch (cardIndex) {
            case 0: return 3;  // 卡片0对应图片3
            case 1: return 1;  // 卡片1对应图片1
            case 2: return 2;  // 卡片2对应图片2
            default: return 0;
        }
    }

    // 自动轮播
    function autoPlay() {
        intervalId = setInterval(() => {
            currentIndex = (currentIndex) % 4 + 1;
            if (currentIndex === 4) {
                goToImage(currentIndex);
                carouselMain.style.transition = 'none';
                goToImage(0);
                void carouselMain.offsetWidth;
                carouselMain.style.transition = 'transform 1s ease-in-out';
                setTimeout(() => {
                    goToImage(1);
                }, 20);
            } else {
                carouselMain.style.transition = 'transform 1s ease-in-out';
                goToImage(currentIndex);
            }

            switch (currentIndex) {
                case 0:
                case 1:
                case 4:
                    crtFocusedCardIdx = 1;
                    break;
                case 2:
                    crtFocusedCardIdx = 2;
                    break;
                case 3:
                    crtFocusedCardIdx = 0;
                    break;
            }

            updateCardsFocus();
        }, 2000);
    }

    // 为指示点添加点击事件
    indexDots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            goToImage(index);
        });
    });

    // 为 sidecards 添加鼠标悬浮事件
    sidecards.forEach((card, index) => {
        card.addEventListener('mouseover', () => {
            // 暂停轮播
            clearInterval(intervalId);
            // 跳转到对应图片
            const targetImageIndex = getImageIndexByCardIndex(index);
            goToImage(targetImageIndex);
            // 更新当前聚焦卡片
            crtFocusedCardIdx = index;
            // 只显示当前悬浮卡片的样式
            sidecards.forEach((c, i) => {
                if (i === index) {
                    c.style.transition = 'top 0.3s ease, box-shadow 0.3s ease';
                    c.style.top = '-8px';
                    c.style.boxShadow = '0px 4px 50px 10px rgba(109,165,255,0.48)';
                } else {
                    c.style.boxShadow = 'none';
                    c.style.top = '0px';
                }
            });
        });

        card.addEventListener('mouseout', () => {
            // 恢复轮播
            autoPlay();
            // 恢复根据当前图片index的卡片聚焦状态
            updateCardsFocus();
        });
    });

    // 启动自动轮播
    autoPlay();

    // 初始化指示点和卡片状态
    updateIndexDots();
    updateCardsFocus();
});